<template>
  <div class="top-view-box">
    <div class="view" v-for="(item,index) in list" :key="index">
      <div class="top-no">
        <img :src="imgList[index]" v-if="index<3"/>
        {{setImg(index)}}
      </div>
      <div class="top-text" :title="item.title">{{item.title}}</div>
      <div class="top-line">
        <div :style="setColor(index,item)"></div>
      </div>
      <div class="top-num">{{item.num}}</div>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: {
    list: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      colorList:[
        "background:linear-gradient(319deg,#ff7e18 12%, #ffb96f 89%);",
        "background:linear-gradient(319deg,#f8d013 12%, #ffefa4 89%);",
        "background:linear-gradient(319deg,#00b9ff 5%, #81d5ff 89%);",
        "background:linear-gradient(319deg,#75e9ff 5%, #00fff1 89%);;"
      ],
      imgList:[
        require("../../../../assets/img/ytfx/no0.png"),
        require("../../../../assets/img/ytfx/no1.png"),
        require("../../../../assets/img/ytfx/no2.png")
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {},
  methods: {
    setColor(index,item){
      let data = this.colorList[3]
      switch (index) {
        case 0:
          data =  this.colorList[0]
          break;
        case 1:
          data =  this.colorList[1]
          break;
        case 2:
          data =  this.colorList[2]
          break;
        default:
          break;
      }
      return data + "width:" + item.line + ";"
    },
    setImg(index){
      if (index<3) {
        return ``
      } else {
        return index + 1
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.top-view-box{
  height: calc(100%);
  width: calc(100%);
  color: #fff;
  font-size: 14px;
  .view{
    display: flex;
    align-items: center;
    height:10%;
    .top-no{
      width: 71px;
      height:22px;
      background-image: url("../../../../assets/img/ytfx/bg2.png");
        background-size: cover; /* 图片覆盖整个元素，保持图片的宽高比 */
        background-repeat: no-repeat; /* 不重复图片 */
        line-height:22px;
        text-align:center;
        img{
          height: 100%;
          width: 100%;
        }
    }
    .top-text{
      width: 80px;
      margin-left: 10px;
      white-space: nowrap;       /* 确保文本不会换行 */
      overflow: hidden;          /* 隐藏超出容器的部分 */
      text-overflow: ellipsis;   /* 显示省略号 */
    }
    .top-line{
      flex:1;
      background: rgba(0,0,0,0.5);
      background: rgba(255,255,255,0.2);
      height:40%;
      border-radius: 10px;
      margin: 0 5px;
      div{
        height: 100%;
        width: 80%;
        background: #fff;
        border-radius: 10px;
      }
    }
    .top-num{
      width:80px;
      text-align: right;
    }
  }
}
</style>
